// -----------------------头部二级导航-----------------------------
// --------------------------地址-------------------------------
var city_choice = document.querySelector('.city-choice');
var dorpdown_layer = document.querySelectorAll('.dorpdown-layer');
city_choice.onmouseover = function () {
    city_choice.className = 'city-choice hover';
    dorpdown_layer[0].className = 'dorpdown-layer show';
}
city_choice.onmouseout = function () {
    city_choice.className = 'city-choice';
    dorpdown_layer[0].className = 'dorpdown-layer';
}
// --------------------------网站导航条----------------------------
var li_dorpdown = document.querySelector('.li_dorpdown');
li_dorpdown.onmouseover = function () {
    li_dorpdown.className = 'li_dorpdown hover';
    dorpdown_layer[1].className = 'dorpdown-layer show';
}
li_dorpdown.onmouseout = function () {
    li_dorpdown.className = 'li_dorpdown';
    dorpdown_layer[1].className = 'dorpdown-layer';
}
// --------------------购物车-------------------------------------
var shopCart = document.querySelector('.shopCart');
shopCart.onmouseover = function () {
    this.className = 'shopCart hover';
    dorpdown_layer[2].className = 'dorpdown-layer show';
}
shopCart.onmouseout = function () {
    this.className = 'shopCart';
    dorpdown_layer[2].className = 'dorpdown-layer';
}
// ---------------------------tab栏-----------------------------------
var categorys_items = document.querySelectorAll('.categorys-items');
var categorys_items_layer = document.querySelectorAll('.categorys-items-layer');
// ------------------------排他----------------------------------------
function page() {
    for (var i = 0; i < categorys_items_layer.length; i++) {
        categorys_items_layer[i].className = 'categorys-items-layer';
    }
};
for (var j = 0; j < categorys_items_layer.length; j++) {
    categorys_items[j].index = j;
    categorys_items[j].onmouseover = function () {
        page();
        categorys_items_layer[this.index].className = 'categorys-items-layer show';
    }
    categorys_items[j].onmouseout = function () {
        page();
    }
};
// -------------------banner轮播图-----------------------
$(function () {
    /*保存当前图片的索引*/
    let index = 0;
    let btn = false;
    /*去除a标签自带的刷新*/
    $('a[href=""]').prop('href', 'javascript:;');
    /*开始先把图片隐藏，默认显示第一张图*/
    $('.content>ul>li').hide();
    $('.content>ul>li:eq(0)').show();
    // 设置方向箭头图标的淡入、淡出
    $('.carousel').hover(function () {
        $('.pos').stop().fadeIn()
    }, function () {
        $('.pos').stop().fadeOut()
    })
    //指示器指示功能（为指示器绑定点击事件）
    $('.dot li').on('click', function () {
        btn = true;
        let now = $(this).index()
        if (now != index) {
            clean();
            index = now;
            show();
        }
    })
    //自动播放功能（定时器）
    setInterval(function () {
        if (!btn) {
            clean();
            if (index == 4) {
                index = 0;
            } else {
                ++index;
            }
            show();
        } else {
            btn = false;
        }
    }, 5000)
    //清除上一张图片和指示器上的指示
    function clean() {
        $(`.content>ul>li:eq(${index})`).stop().fadeOut();
        $(`.dot>ul>li:eq(${index})`).removeClass('active');
    }
    //添加新的图片和指示器上的指示
    function show() {
        $(`.content>ul>li:eq(${index})`).stop().fadeIn();
        $(`.dot>ul>li:eq(${index})`).addClass('active');
    }
});
// --------------------登录小tab栏------------------------
$(function () {
    $('.vip-item>.tit>a').mouseover(function () {
        $(this).addClass('on').siblings().removeClass('on');
        $('.con>ul').eq($(this).index()).addClass('show').siblings().removeClass('show');
    })
});
// ---------------------顶部广告消失-------------------------------
$(".top-banner i").click(function () {
    $(".top-banner").addClass('hide');
});
//------------------------ 跳楼机---------------------------
$(function () {
    $("#return-top").click(function (e) {
        $("html").animate({
            scrollTop: 0
        }, 1000);
    });
    var mainOffsetTop = $("#brand").offset().top;
    $(window).scroll(function (e) {
        // console.log($(window).scrollTop(), mainOffsetTop);
        if ($(window).scrollTop() >= mainOffsetTop) {
            $("#foolrall").fadeIn(100);
        } else {
            $("#foolrall").fadeOut(100);
        }
        $(".foolr").each(function (index, ele) {
            if ($(window).scrollTop() > ele.offsetTop) {
                $(".foolritem").removeClass('foolrred ');
                $(".foolritem").eq(index).addClass('foolrred');
            }
        });
    });
    // 给侧边栏父元素绑定点击事件
    $('.foolritem').click(function () {
        // 获取具体的对应楼层的偏移量
        // 真正触发事件的事件源
        var indexValue = $(this).index();
        console.log(indexValue);
        console.log($('.foolr'));
        var topValue = $('.foolr').eq(indexValue + 1).offset().top;
        // 回到设置的位置上
        // console.log(topValue);
        $('html').animate({
            scrollTop: topValue
        }, 800);
    });
});
// --------------------------定位导航----------------------------
$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 240) {
            $(".attached-search-container").slideDown(100);
            $(".attached-search-container").addClass('show');
        } else {
            $(".attached-search-container").slideUp(100);
            $(".attached-search-container").removeClass('show');
        }
    })
})
// -----------------商品数据渲染----------------------------
$.ajax({
    type: 'GET',
    url: 'mock/shouye.json',
    success: function (data) {
        shopGo(data);
    },
    error: function () {
        console.log("失败")
    }
});
function shopGo(data) {
    // console.log(data[0].shouye[0].good_urls.nowurl);
    var datagon = data[0].shouye;
    // console.log(datagon);
    for (var i = 0; i < datagon.length; i++) {
        // console.log(datagon[i].good_urls.nowurl);
        var content = `  <li class="opacity_img">
                        <a href="../pages/shoppingCart.html?id=${datagon[i].good_id}"target="_blank">
                            <div class="p-img"><img
                                    src="${datagon[i].good_urls.nowurl}">
                            </div>
                            <div class="p-name">
                               ${datagon[i].goods_title}</div>
                            <div class="p-price">
                                <div class="shop-price">
                                  ${datagon[i].goods_price}
                                </div>
                                <div class="original-price">${datagon[i].goodsz_price}</div>
                            </div>
                        </a>
                    </li>`;
        document.querySelector(".lift-channel ul").innerHTML += content;
    }
};
// 缓动轮播图
// 好货大聚会
// 照片的最大父元素
var yjSeckimg = document.querySelector('.box-bd');
// ul
var yjseckUl = document.querySelector('.box-bd ul');
// 左边的按钮
var seckLeftBtn = document.querySelector('.prev');
// 右边的按钮
var seckRightBtn = document.querySelector('.next');
// 鼠标进入
function animationFun2(ele, target) {
    // 先清除另外一个方向的定时器
    clearInterval(ele.interId);
    // 把定时器的id设置到DOM元素上
    ele.interId = setInterval(function () {
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
        } else {
            var step = (target - ele.offsetLeft) / 10;
            // 当step为小数时,进行上下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            ele.style.left = ele.offsetLeft + step + 'px';
        }
    }, 20);
}
var num = 0;
seckLeftBtn.onclick = function () {
    num++;
    if (num == 6) {
        num = 1;
        yjseckUl.style.left = 0;
    }
    var timp = num * (-238)
    animationFun2(yjseckUl, timp);
}
seckRightBtn.onclick = function () {
    if (num == 0) {
        num = 6;
        yjseckUl.style.left = num * (-238) + 'px';
    }
    num--;
    var timp = num * (-238)
    animationFun2(yjseckUl, timp);
}

setInterval(function () {
    num++;
    if (num == 6) {
        num = 1;
        yjseckUl.style.left = 0;
    }
    var timp = num * (-238);
    animationFun2(yjseckUl, timp);
}, 5000);
// console.log($('.home_body').eq(1));
// console.log($('#common-cat').eq(1));
// $('#common-cat').eq(0).mouseover(function () {
//     $('div.home_body').eq(1).addClass('show');
// });
let categorys_type = document.querySelectorAll('.categorys-type');
let home_nav = document.querySelectorAll('.categorys-tab-content');
// console.log(categorys_type[1]);
console.log(home_nav);
categorys_type[1].onmouseover = function () {
    home_nav[1].style.display = 'block';
}
categorys_type[1].onmouseout = function () {
    home_nav[1].style.display = 'none';
}

